<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>

    <div id="a"></div>

    <script>

        // 解决透明度的问题
        //    把浮动数化为整数   
        //    0.2   --   1
        //    20    --   100


        let oDiv = document.querySelector('div');
        animate(oDiv, {
            left: 500,
            top: 400,
            width: 300,
            height: 600,
            opacity: 0.2
        })




        function animate(ele, obj, cb) {
            let t = setInterval(function () {
                // 遍历属性
                for (let key in obj) {
                    let cur, speed;
                    // 判断属性为opacity
                    if (key === 'opacity') {
                        // 把值放大100倍
                        cur = getComputedStyle(ele)[key];  // 0.2*100    1*100
                        cur *= 100;
                        speed = (obj[key] * 100 - cur) / 10;
                    } else {
                        cur = parseInt(getComputedStyle(ele)[key]);
                        speed = (obj[key] - cur) / 10;
                    }

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    cur += speed;
                    // 判断透明度
                    if (key === 'opacity') {
                        // 之前放大了100倍    / 100
                        ele.style[key] = cur / 100;
                    } else {
                        ele.style[key] = cur + 'px';
                    }


                    // 判断到达终点就把属性给删除
                    if (cur === obj[key]) {
                        // 
                        delete obj[key];
                        // 判断对象为空的时候  {}
                        if (Object.keys(obj).length === 0) {
                            clearInterval(t);
                            cb && cb();
                        }
                    }
                }
            }, 20)
        }


        // [] === []
        // 如何判断数组是空的  arr.length === 0
    </script>

</body>

</html>